<template>
  <div class="fw fh">
    <occupation-table height="100%" :data="tableData">
      <el-table-column prop="玩家" label="玩家" fixed :width="130">
        <template #default="{ row }">
          <span class="number" :class="{ brush: row.承伤 < avgValue }">{{ row.玩家 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="职业"
        label="职业"
        fixed
        :width="80"
        :filters="getFilterObject(tableData, '职业')"
        :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column
        prop="团长"
        label="团长"
        fixed
        :width="130"
        :filters="getFilterObject(tableData, '团长')"
        :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :key="index"
        sortable
        align="right"
        head-align="center"
      >
        <template #default="{ row }">
          <span class="number">{{ formatNumber(row[item.prop]) }}</span>
          <span class="percent" :style="{ '--max': maxValues[item.prop], '--value': row[item.prop] }"></span>
        </template>
      </el-table-column>
    </occupation-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { useStore } from "vuex";
import occupationTable from "@/components/occupation-table.vue";

const store = useStore();
const datas = ref(store.getters.getDatas);
const tableData = ref([]);
const maxValues = ref({});
const avgValue = ref(0);
const columns = [
  {
    label: "击败",
    prop: "击败",
    width: 90,
  },
  {
    label: "助攻",
    prop: "助攻",
    width: 90,
  },
  {
    label: "资源",
    prop: "战备资源",
    width: 90,
  },
  {
    label: "人伤",
    prop: "人伤",
    width: 110,
  },
  {
    label: "塔伤",
    prop: "塔伤",
    width: 110,
  },
  {
    label: "治疗值",
    prop: "治疗值",
    width: 110,
  },
  {
    label: "承伤",
    prop: "承伤",
    width: 110,
  },
  {
    label: "重伤",
    prop: "重伤",
    width: 90,
  },
  {
    label: "青灯焚骨",
    prop: "青灯焚骨",
    width: 120,
  },
  {
    label: "战复",
    prop: "战复",
    width: 90,
  },
  {
    label: "控制",
    prop: "控制",
    width: 90,
  },
  {
    label: "总伤",
    prop: "总伤",
    width: 110,
  },
  {
    label: "KDA",
    prop: "KDA",
    width: 90,
  },
  {
    label: "转换系数",
    prop: "转换系数",
    width: 120,
  },
  {
    label: "伤害效率",
    prop: "伤害效率",
    width: 120,
  },
  {
    label: "参团率",
    prop: "参团率",
    width: 100,
  },
];

watch(
  () => store.state.objectType,
  () => {
    process();
  }
);

/** 千分格式化数字 */
const formatNumber = computed(() => (number) => {
  return new Intl.NumberFormat().format(number);
});
/** 数据过滤的选项 */
const getFilterObject = computed(() => (arr, key) => {
  let list = arr.map((item) => item[key]);
  list = Array.from(new Set(list));
  return list.map((item) => {
    return { text: item, value: item };
  });
});
/** 数据过滤 */
const filterHandler = (value, row, col) => {
  const property = col["property"];
  return row[property] === value;
};

const process = () => {
  const { list, max, avg } = store.getters.getDatas;
  // 计算各项值的吕布
  maxValues.value = max;
  tableData.value = list;
  avgValue.value = avg;
};

onMounted(() => {
  process();
});
</script>

<style scoped></style>
